<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户登录</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <script src="../../layui/js/global.js"></script>
    <script src="../../layui/js/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        #coent{
            width: 1500px;
            margin: 0 auto;

        }
        #header .conentist{
            width: 150px;

            height: 70px;

            float: left;

        }
        #header .daohang{
            width: 1350px;

            float: right;
        }
        #footer{
            background-image: url("../../layui/images/bgg.jpg");
            height: 180px;
            bottom:0;


        }
        #background{
            height: 900px;

        }
        #text-bg {
            position: absolute;
            right: 0;
            top: 50%;
            bottom: auto;
            transform: translateY(-50%);
            padding: 0;
            left: 0;
            text-align: center;
        }
        #h1 {
            font-size: 90px;
            line-height: 108px;
            text-transform: uppercase;
            color: #6c757d;
            font-weight: bold;
            padding-bottom: 35px;
            padding-top: 25px;
        }
        .white {
            color: #fff;
        }

        #read-more {
            justify-content: center;
            display: flex;
        }
        #read-more a {
            font-size: 17px;
            padding: 15px 30px;
            background-color: #ee580f;
            color: #fff;
            display: inline-block;
            line-height: 20px;
            border-radius: 30px;
            text-align: center;
            margin-top: 30px;
        }
        #read-more a:hover {
            background: #15cfe5;
        }
        #footer{
            background-color: #FFD700;
            height: 180px;

        }

        #div1{
            text-transform: uppercase;
            float: top;
            z-index: 1;
            position: relative;
        }
        #div2{
            margin: auto;
            width: 900px;
            height: 300px;
            text-align: center;
            background-color: aliceblue;
            opacity: 0.8
        }
    </style>
</head>
<body>
<div id="div1">
    <div class="layui-container"> </div>
</div>
<div id="coent">
    <header id="header">
        <div class="conentist">
            <img src="../../layui/images/logo.jpg">
        </div>
        <div class="daohang">
            <ul class="layui-nav" lay-filter="">
                <li class="layui-nav-item ">用户登录界面</li>
            </ul>
        </div>
        <div style="clear: both;"></div>
    </header>
    <div id="background">
        <img src="../../layui/images/bg.jpg">
        <div id="text-bg">
            <div style="height: 100px">
                <div style="margin-top: 30px; width: 900px; padding: 300px; text-align: center;">
                    <div class="layui-row">
                        <div id="div2">
                            <div class="layui-col-md6 layui-col-md-offset3">
                                <h3 style="text-align: center">用户登录</h3>
                                <form class="layui-form" id="loginForm" >
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">账号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="username" required  lay-verify="username" placeholder="请输入账号" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">密码</label>
                                        <div class="layui-input-block">
                                            <input type="password" name="password" required lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                        </div>

                                    </div>
                                    <!--                    <div class="layui-form-item">-->
                                    <!--                        <label class="layui-form-label">验证码</label>-->
                                    <!--                        <div class="layui-input-block">-->
                                    <!--                            <input type="text" name="ChackCode" required lay-verify="pass" placeholder="请输入验证码" autocomplete="off" class="layui-input">-->
                                    <!--                            <img src="CodeServlet"/><span>${error_code}</span><br/>-->
                                    <!--                            <input type="submit" class="layui-btn layui-btn-primary" value="提交">-->
                                    <!--                        </div>-->

                                    <!--                    </div>-->

                                    <div>

                                        <input id="butt" type="button" class="layui-btn layui-btn-primary" value="还没有账号？立即注册" />
                                    </div>


                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" id="loginBtn" class="layui-btn addBtn" >登录</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                                        </div>
                                    </div>

                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--                    //注册表单-->
        <div style="display: none;" id="gb">
            <form class="layui-form" id="addForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户账号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" required lay-verify="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input" id="password">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="passwords" required lay-verify="pwd" placeholder="请再次输入密码" autocomplete="off" class="layui-input" id="pass2">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="email" name="email" required lay-verify="emails" placeholder="请输入邮箱" autocomplete="off" class="layui-input" id="email">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">联系方式</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" required lay-verify="phones" placeholder="请输入手机号" autocomplete="off" class="layui-input" id="phone">
                    </div>
                </div>
                <!--                            <div class="layui-form-item">-->
                <!--                                <label class="layui-form-label">单选框</label>-->
                <!--                                <div class="layui-input-block">-->
                <!--                                    <input type="radio" name="sex" value="男" title="男" checked>-->
                <!--                                    <input type="radio" name="sex" value="女" title="女">-->
                <!--                                </div>-->
                <!--                            </div>-->
                <!--                            <div class="layui-form-item">-->
                <!--                                <label class="layui-form-label">复选框</label>-->
                <!--                                <div class="layui-input-block">-->
                <!--                                    <input type="checkbox" name="like[write]" title="发呆">-->
                <!--                                    <input type="checkbox" name="like[read]" title="发呆" checked>-->
                <!--                                    <input type="checkbox" name="like[dai]" title="发呆">-->
                <!--                                </div>-->
                <!--                            </div>-->
                <!--                            <div class="layui-form-item">-->
                <!--                                <div class="layui-inline">-->
                <!--                                    <label class="layui-form-label">所在地</label>-->
                <!--                                    <div class="layui-input-inline">-->
                <!--                                        <select name="type" lay-verify="required" lay-filter="type">-->
                <!--                                            <option value=""></option>-->
                <!--                                            <option value="1">北京</option>-->
                <!--                                            <option value="2">上海</option>-->
                <!--                                            <option value="3">广州</option>-->
                <!--                                        </select>-->
                <!--                                    </div>-->
                <!--                                </div>-->
                <!--                            </div>-->
                <!--                            <div class="layui-form-item">-->
                <!--                                <label class="layui-form-label">真实姓名</label>-->
                <!--                                <div class="layui-input-inline">-->
                <!--                                    <input type="text" name="truename" required lay-verify="truename" placeholder="请输入您的姓名" autocomplete="off" class="layui-input">-->
                <!--                                </div>-->
                <!--                            </div>-->
                <!--                            <div class="layui-form-item">-->
                <!--                                <label class="layui-form-label">身份证</label>-->
                <!--                                <div class="layui-input-inline">-->
                <!--                                    <input type="text" name="cardId" required lay-verify="cardId" placeholder="请输入身份证号" autocomplete="off" class="layui-input">-->
                <!--                                </div>-->
                <!--                            </div>-->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" type="button" lay-filter="addUserMessage" id="useradd">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

        </div>
        <!--                    //注册表单end-->
    </div>
</div>



<script src="../../layui/layui.js"></script>
<script src="../../layui/js/sys/userlogin.js"></script>
<script>
    layui.use(['layer' ,'form'], function(){
        var layer = layui.layer;
        var form = layui.form ;
    });
</script>
<!--//注册-->
<script>
    layui.use(function() {
        var layer = layui.layer;
        var form = layui.form;
        // var element = layui.element;
        // var layedit = layui.layedit;
        $(function() {
            $("#butt").click(function() {
                layer.open({
                    type: 1,
                    title: "注册页面",
                    area: ['600px', '700px'],
                    offset: '20px',
                    content: $("#gb"),
                    cancel: function() {
                        // 你点击右上角 X 取消后要做什么
                        setTimeout('window.location.reload()', 1);
                    },
                })
                form.render();
            })

            //验证输入的密码是否相同；
            $("#pass2").blur(function() {
                var pass1 = $("#password").val();
                var pass2 = $("#pass2").val();
                if(pass1 != pass2) {
                    layer.msg("两次输入的密码不一致", {
                        "icon": 2,
                        "time": 2000
                    });
                    $("#pass2").val("");
                    return false;
                }
                return true;
            });
        });
        // //创建一个编辑器
        // var editIndex = layedit.build('LAY_demo_editor');
        // //自定义验证规则
        // form.verify({
        //     title: function(value) {
        //         if(value.length < 5) {
        //             return '标题至少得5个字符啊';
        //         }
        //     },
        //     pwd: [
        //         /^(\w){6,20}$/, '只能输入6-20个字母、数字、下划线'
        //     ],
        //     emails: [
        //         /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, '请输入正确的邮箱格式：<br>如：xxx@qq.com<br>xxx@163.com等格式'
        //     ],
        //     // phones: [
        //     //     /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/, '您的输入有误，请重新输入(中国11位手机号)'
        //     // ],
        //     // truename: [
        //     //     /^[\u4e00-\u9fa5]{2,4}$/, '您的输入有误，请输入2-4位中文'
        //     // ],
        //     // cardId: [
        //     //     /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, '请输入正确的身份证号'
        //     // ],
        //     content: function(value) {
        //         layedit.sync(editIndex);
        //     }
        // });
    });
</script>
</body>
</html>